import {
    Avatar,
    Button,
    Empty,
    List,
    message,
    Modal,
    Input,
    Tree,
    Typography, Table,
    Affix,
    Spin,
} from "antd";
import React, {ReactNode, useEffect, useState} from "react";
import {Component} from "react";
import {
    GET_COURSE_CHAPTER_LIST,
    GET_COURSE_DETAILES,
    GET_COURSE_LIST,
    GET_COURSE_TEACHERS,
    GET_USER_COURSE_STATE,
    GET_EXAM_TEST,
    SERVER_PICTURE_URL,
    GET_COURSE_NOTICES,
    USER_ADD_COURSE,
    USER_HAVED_COURSE,
    GET_COURSE_RECORD,
    ADD_COURSE_COMMENT,
    GET_COURSE_COMMENT,
    POST_COURSE_HISTORY,
    GET_START_ARTICLE,
} from "../../api/APIURLDefine";
import {AxioInstance} from "../../api/AxiosHelper";
import {model} from "../../model/model";
import "./index.less";
import {inject, observer} from "mobx-react";
import {
    CheckUserAuthorized,
    CheckUserLogin,
    CheckUserLoginOnly,
    setRichTextImage
} from "../../utils/Utils";
import {withRouter} from "react-router-dom";
import AuthenticateModal from "../../components/authenticateModal";
import Form from "antd/es/form";
import CommentBox from "../../components/comments/CommentBox";
import CommentItem from "../../components/comments/CommentItem";
import $ from 'jquery';
import moment from "moment";


interface CourseState {
    courseData?: model.Course;
    currentSelect: number;
    chapters: Array<any>;
    teachers: Array<any>;
    userCourseState: number;
    expand: Array<any>;
    exams: Array<any>;
    notice: any;
    hasCourse: boolean;//是否有该课程
    record: any;
    comments: Array<any>;
    submitting: boolean;
    value: string;
    replyValue: string;
    courseId: number;
    replayTo: number;
    expandID: number;
    currentId: number;
    visible: boolean;
    moreVisible: boolean;
    container: HTMLDivElement | null;
    top: number;
    imgWidth: number;
    imgHeight: number;
    loadingJoinCourse: boolean;
}

const PermissionFC: React.FC<any> = (props: any) => {
    return <div>{props.children}</div>;
};

const {TextArea} = Input;

const Editor = ({onChange, onSubmit, submitting, value}) => (
    <>
        <Form.Item>
            <TextArea rows={4} onChange={onChange} value={value}/>
        </Form.Item>
        <Form.Item>
            <Button htmlType="submit" onClick={onSubmit} type="primary">
                评论
            </Button>
        </Form.Item>
    </>
);


// @ts-ignore
@withRouter
@inject("globalStore", "userStore", "commentStore")
@observer
class Course extends Component<any, CourseState> {
    constructor(props: any) {
        super(props);
        this.state = {
            courseData: null,
            currentSelect: 0,
            chapters: [],
            teachers: [],
            userCourseState: 0,
            expand: [],
            exams: [],
            notice: [],
            hasCourse: false,
            record: null,
            comments: [],
            submitting: false,
            value: '',
            courseId: 0,
            replayTo: -1,
            replyValue: '',
            expandID: -1,
            currentId: -1,
            visible: false,
            moreVisible: false,
            container: null,
            top: 85,
            imgWidth: 5.94,
            imgHeight: 3.4,
            loadingJoinCourse: true,
        };
    }

    getId() {
        var params = new URLSearchParams(this.props.history.location.search);
        var id = 1;
        if (params.has("id")) {
            id = parseInt(params.get("id"));
        }
        return id;
    }

    componentDidMount() {
        const id = this.getId();
        this.setState({courseId: id});
        this.props.commentStore.SetCourseId(id);
        AxioInstance.get(`${GET_COURSE_DETAILES}/${id}`).then((res: any) => {
            this.setState({courseData: res});
            AxioInstance.get(`${GET_COURSE_CHAPTER_LIST}/${id}`).then((data: any) => {
                if (data) {
                    var ids = data.map((item) => item.id);
                    // console.log(data)
                    this.setState({chapters: data, expand: ids});
                }

            });

            AxioInstance.get(`${GET_COURSE_TEACHERS}/${id}`).then((data: any) => {
                this.setState({teachers: data});
            });

            AxioInstance.get(`${GET_EXAM_TEST}/${id}`).then((data: any) => {
                this.setState({exams: data});
            });
            AxioInstance.get(`${GET_COURSE_NOTICES}/1/10?courseId=${id}`).then(
                (data: any) => {
                    this.setState({notice: data});
                }
            );
            if (CheckUserLoginOnly()) {
                AxioInstance.get(`${USER_HAVED_COURSE}/${id}`).then((data) => {
                    // if (CheckUserLoginOnly()) {
                    // console.log("登录验证过了");
                    if (CheckUserAuthorized()) {
                        this.setState({hasCourse: true, loadingJoinCourse: false});
                    } else {
                        this.setState({loadingJoinCourse: false});
                    }
                    // } else {
                    // this.setState({ hasCourse: false,loadingJoinCourse:false });
                    // }
                }).catch((e) => {
                    console.error(e);
                    // console.log("未添加课程");
                    this.setState({loadingJoinCourse: false});
                })
            } else {
                console.log("验证不过");
                this.setState({loadingJoinCourse: false});
            }
            if (this.props.userStore.userInfo !== null) {
                setTimeout(() => {
                    AxioInstance.post(`${POST_COURSE_HISTORY}`, {
                        "chapterId": -1,
                        "courseId": this.state.courseId,
                        "state": 1,
                        "type": 1,
                        "userId": this.props.userStore.userInfo.id
                    })
                }, 1000);
            }

            // this.getComments();
            if (this.props.userStore.userInfo)
                AxioInstance.get(`${GET_USER_COURSE_STATE}`, {
                    params: {course: res.id},
                })
                    .then((data: any) => {
                        console.log(data);
                    })
                    .catch((data) => {
                    });
        });
        AxioInstance.get(`${GET_COURSE_RECORD}/${id}`).then((resp) => {
            this.setState({record: resp});
        }).catch(e => console.error(e));
        /* setTimeout(() => {
             AxioInstance.get(`${GET_START_ARTICLE}/${this.state.courseId}`).then(res => console.log(res));
             // let container = document.getElementById("text-container");
             // if (container.scrollHeight > container.offsetHeight) {
             //     this.setState({moreVisible: true});
             // } else {
             //     this.setState({moreVisible: false});
             // }
         }, 500)*/
        let header = $("#layoutHeader").outerHeight() / 0.8;
        this.setState({top: header});
    }


    private getComments = () => {
        AxioInstance.get(`${GET_COURSE_COMMENT}/1/99?id=${this.props.commentStore.courseId}`).then((resp: any) => {
            // console.log(resp);
            this.setState({comments: resp.records});
        }).catch((e) => console.error(e));
    }

    private rendDescription() {
        return <div>{this.state.courseData?.description}</div>;
    }

    private renderTeacherList() {
        return (
            <div>
                <div className="course-title">
                    <img src="./ui/VRpage/icon2_teacher.png"/>
                    <span>教学团队</span>
                </div>
                {this.state.teachers && this.state.teachers.length > 0 ? (
                    <List
                        itemLayout="horizontal"
                        dataSource={this.state.teachers}
                        renderItem={(item, index) => (
                            <List.Item>
                                <div
                                    className={this.state.expandID === index ? "teacher-containerShowAll" : "teacher-container"}>
                                    <div className="left-item-panel">
                                        <Avatar src={SERVER_PICTURE_URL + item.avatar}
                                                style={{width: "1rem", height: "1rem"}}/>
                                        {/* <div className="avatar-title">{item.name}</div> */}
                                    </div>
                                    <div style={{position: "relative", cursor: "pointer"}}
                                         onClick={() => {
                                             if (this.state.expandID === index) {
                                                 this.setState({expandID: -1, currentId: index})
                                             } else {
                                                 this.setState({currentId: this.state.expandID})
                                                 this.setState({expandID: index})
                                             }
                                         }}
                                    >
                                        <div className="avatar-title">{item.name}</div>
                                        <div className="Teacher-label">{item.titles}</div>
                                        <div id={"right-teacher-panel" + index}
                                             className={this.state.expandID === index ? "right-teacher-panelShowAll" : "right-teacher-panel"}>
                                            <div id={"textContent1" + index} style={{
                                                fontSize: "0.16rem",
                                                width: "100%",
                                                height: "auto",
                                                textAlign: "justify",
                                                color: "#666"
                                            }}>
                                                {item.description}
                                            </div>
                                        </div>
                                        <div style={{
                                            width: "100%",
                                            height: "0.32rem",
                                            display: "flex",
                                            position: "absolute",
                                            justifyContent: "center",
                                            color: "#666666",
                                            fontSize: "0.14rem",
                                            bottom: 0,
                                        }}
                                        >
                                            {($(`#right-teacher-panel${index}`).outerHeight() < $(`#textContent1${index}`).outerHeight() || this.state.currentId === index) ?
                                                <div style={{marginTop: "0.05rem", marginBottom: "0.5rem"}}>
                                                    <img style={{
                                                        width: "0.14rem",
                                                        height: "0.14rem",
                                                        margin: "auto",
                                                        cursor: "pointer",
                                                        marginRight: "0.13rem",
                                                        marginTop: "-0.03rem"
                                                    }}
                                                         src={this.state.expandID === index ? "./ui/VRpage/shouqi.png" : "./ui/VRpage/zhankai.png"}
                                                    />{this.state.expandID === index ? "收起内容" : "展开内容"}
                                                </div> : <a></a>}
                                        </div>
                                    </div>


                                </div>
                            </List.Item>
                        )}
                    />
                ) : (
                    <Empty></Empty>
                )}
            </div>
        );
    }

    private renderTestStandard() {
        console.log(this.state.courseData)
        return (
            <div>
                <div className="course-title">
                    <img src="./ui/VRpage/icon_1.png"></img>
                    <span>考核标准</span>
                </div>
                <div style={{marginTop: "0.1rem", fontSize: "0.16rem"}}
                     dangerouslySetInnerHTML={{
                         __html: setRichTextImage(this.state.courseData?.examStandard),
                     }}
                />
                {/*  一 0分到59分为不及格成绩 <br/>
                二 60分到79分为及格成绩<br/>
                三 80分到89分为较好<br/>
                四 90分以上为优秀<br/>*/}
            </div>
        );
    }

    /*课程设计*/
    private renderCourseDesigned() {
        return (
            <div>
                <div className="course-title">
                    <img src="./ui/VRpage/icon_1.png"></img>
                    <span>课程设计</span>
                </div>
                <div
                    dangerouslySetInnerHTML={{
                        __html: setRichTextImage(this.state.courseData?.courseDesign),
                    }}
                    style={{marginTop: "0.1rem", fontSize: "0.16rem"}}
                    className="course-design"
                />
                {/*  一 0分到59分为不及格成绩 <br/>
                二 60分到79分为及格成绩<br/>
                三 80分到89分为较好<br/>
                四 90分以上为优秀<br/>*/}
            </div>
        );
    }

    private renderCourseNotice() {
        console.log(this.state.notice);
        return (
            <div>
                <div className="course-title">
                    <img src="./ui/VRpage/icon_1.png"></img>
                    <span>课程公告</span>
                </div>
                <List
                    dataSource={this.state.notice.records}
                    renderItem={(item: any) => (
                        <List.Item style={{fontSize: "0.16rem"}}>
                            <Typography.Text mark>[{item.createdTime + ""}]</Typography.Text>
                            {item.notice}
                        </List.Item>
                    )}
                />
            </div>
        );
    }

    replyChange = e => {
        this.setState({
            replyValue: e.target.value,
        });
    }
    handleChange = e => {
        this.setState({
            value: e.target.value,
        });
    };

    private renderQAQ() {
        const comments = this.props.commentStore.comments;
        const user = this.props.userStore.userInfo;
        return (
            <div>
                <div className="course-title">
                    <img src="./ui/VRpage/icon2_subject.png"></img>
                    <span>互动问答</span>
                </div>
                <div className="course-comment-head">
                    <CommentBox/>
                </div>
                <div className="course-comment-body">
                    {
                        comments?.length > 0 ?
                            comments?.map((element, index) => {
                                return <CommentItem key={element.id} comment={element} reply={null}>
                                    {
                                        this.deserializeCommentTree(element)
                                    }
                                </CommentItem>
                            })
                            : null
                    }
                </div>
            </div>
        );
    }

    private deserializeCommentTree = (node: any) => {
        if (node.replies.length > 0) {
            return node.replies.map((element, index) => {
                if (element.replies.length > 0) {
                    return <div key={element.id}>
                        <CommentItem key={element.id} comment={element} reply={node.nickname}>
                        </CommentItem>
                        {
                            this.deserializeCommentTree(element)
                        }
                    </div>
                } else {
                    return <CommentItem key={element.id} comment={element} reply={node.nickname}>
                    </CommentItem>
                }

            })
        }
        return null;
    }

    private renderCourseExamTest() {
        let exams = this.state.exams;
        const time = Date.now();
        let btnStr = "开始考试";
        const colums = [
            {
                title: '测试名称',
                dataIndex: 'examName',
                key: 'name',
                width: "25%",
                ellipsis: true,
                align: 'center' as 'center',
            },
            {
                title: '开始时间', dataIndex: 'startTime', key: 'startTime',
                align: 'center' as 'center',
                render: (record) => <span>{moment(record).format("YYYY-MM-DD HH:MM")}</span>
            },
            {
                title: '结束时间', dataIndex: 'endTime', key: 'endTime',
                align: 'center' as 'center',
                render: (record) => <span>{moment(record).format("YYYY-MM-DD HH:MM")}</span>
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'x',
                align: 'center' as 'center',
                render: (record) => <div style={{width: "100%", height: "100%", display: "grid", placeItems: "center"}}>
                    <a
                        style={{
                            pointerEvents: (time < new Date(record.startTime).getTime() || time > new Date(record.endTime).getTime()) ? "none" : "painted",
                            background: (time < new Date(record.startTime).getTime() || time > new Date(record.endTime).getTime()) ? "#cccccc" : "#3e84fd"
                        }}
                        onClick={() => {
                            if (CheckUserLogin()) {
                                if (CheckUserAuthorized()) {
                                    if (this.state.hasCourse) {
                                        this.props.history.push(`/exam?id=${record.id}`);
                                    } else {
                                        message.error("请先加入课程")
                                    }
                                } else {
                                    this.props.globalStore.updateShowAuthModalVisible(true);
                                }
                            }
                        }}
                    >
                        {time < new Date(record.startTime).getTime() ? "考试未开始" : (time > new Date(record.endTime).getTime() ? "考试已结束" : "开始考试")}
                    </a></div>,
            }
        ]
        return (
            <div className="exam-container">
                <div className="course-title">
                    <img src="./ui/VRpage/icon2_subject.png"/>
                    <span>考评测试</span>
                </div>
                <div style={{marginTop: "0.2rem"}}>
                    <Table
                        rowKey={record => record.id}
                        columns={colums}
                        dataSource={exams}
                        pagination={false}
                        rowClassName={(row, info) => {
                            return info % 2 === 0 ? "table-row-single" : "table-row-double"
                        }}
                        expandable={{
                            expandedRowRender: record =>
                                <div style={{marginLeft: "0.5rem", color: "#666"}}>{record.description}</div>,
                        }}
                    />
                </div>
                {/*<ul>
                    {exams.map((item) => {
                        console.log(item)
                        return (
                            <li key={item.id}>
                                <div className="title">{item.examName}</div>
                                <div className="description">
                                    {item.description}
                                </div>
                                <div className="date">
                                    {`考试时间：${item.startTime}--${item.endTime}`}{" "}
                                </div>

                            </li>
                        );
                    })}
                </ul>*/}
            </div>
        );
    }

    private renderIcon(type, exp = false) {
        switch (type) {
            case 1:
                return (
                    <img
                        className="course-icon"
                        src="./ui/CoursePage/icon_article.png"
                    ></img>
                );
            case 2:
                return (
                    <img
                        className="course-icon"
                        src="./ui/CoursePage/icon_video.png"
                    ></img>
                );
            case 3:
                return (
                    <img className="course-icon" src="./ui/CoursePage/icon_VR.png"></img>
                );
            case 4:
                return (
                    <img
                        className="course-icon"
                        src="./ui/CoursePage/icon_live.png"
                    ></img>
                );
        }
        return (
            <img
                className="course-icon"
                src={
                    exp
                        ? "./ui/CoursePage/icon_minus_sign.png"
                        : "./ui/CoursePage/icon_add.png"
                }
            ></img>
        );
    }

    private recursiveParseTree(
        parent: any,
        chapters: Array<any>,
        expand: Array<any>
    ) {
        var children = [];
        for (let index = 0; index < chapters.length; index++) {
            const element = chapters[index];
            if (!parent && !element.parent) {
                let child = {
                    title: element.chapterName,
                    id: element.id,
                    children: [],
                    icon: this.renderIcon(element.lessonType),
                    switcherIcon: null,
                    key: element.id,
                    isLeaf: children.length == 0,
                    index: children.length,
                    lessonType: element.lessonType,
                };
                child.children.push(
                    ...this.recursiveParseTree(element, chapters, expand)
                );
                child.isLeaf = child.children.length == 0;
                child.switcherIcon =
                    child.children.length > 0
                        ? this.renderIcon(
                        0,
                        expand.length == 0 || expand.indexOf(child.id) >= 0
                        )
                        : this.renderIcon(element.lessonType);
                children.push(child);
            } else if (parent && element.parent === parent.id) {
                let child = {
                    title: element.chapterName,
                    id: element.id,
                    children: [],
                    lessonType: element.lessonType,
                    icon: this.renderIcon(element.lessonType),
                    switcherIcon: null,
                    key: element.id,
                    isLeaf: children.length == 0,
                    index: children.length,
                };
                child.children.push(
                    ...this.recursiveParseTree(element, chapters, expand)
                );
                child.isLeaf = child.children.length == 0;
                child.switcherIcon =
                    child.children.length > 0
                        ? this.renderIcon(
                        0,
                        expand.length == 0 || expand.indexOf(child.id) >= 0
                        )
                        : this.renderIcon(element.lessonType);
                children.push(child);
            }
        }
        // console.log(children)
        return children;
    }

    private onEnterClick(item) {
        if (this.props.userStore.userInfo !== null) {
            AxioInstance.post(`${POST_COURSE_HISTORY}`, {
                    "chapterId": item.id,
                    "courseId": this.state.courseId,
                    "state": 1,
                    "type": 1,
                    "userId": this.props.userStore.userInfo.id
                }
            )
        }
        var path = "";
        switch (item.lessonType) {
            case 1:
                path = "/article";
                break;
            case 2:
                path = "/video";
                break;
            case 3:
                path = "/vrExp";
                break;
            case 4:
                path = "/living";
                break;
            default:
                return;
        }
        /* if (CheckUserLogin()) {
             if (!CheckUserAuthorized()) {
                 this.props.globalStore.updateShowAuthModalVisible(true);
                 return;
             }
         } else {
             return;
         }*/

        if (item.lessonType === 4) {
            return;
        }
        const DOMAIN_NAME = this.props.globalStore.DOMainName;
        window.open(`/${DOMAIN_NAME}` + path + "?id=" + item.id);
    }

    CloseModal() {
        this.setState({visible: false});
    }

    private renderCourseDesign(chapters: Array<any>, keys: Array<any>) {
        const Demo: React.FC<{}> = () => {
            const [showLine, setShowLine] = useState(true);
            const [showIcon, setShowIcon] = useState(false);
            const [showLeafIcon, setShowLeafIcon] = useState(true);
            const [expand, updateExpand] = useState(keys);
            const onSelect = (selectedKeys, info) => {
                console.log("selected", selectedKeys, info);
            };

            return (
                <div className="course-hide-tree">
                    <div>
                        <div className="course-title">
                            <img src="./ui/CoursePage/icon2_course_n.png"></img>
                            <span>在线课程</span>
                        </div>
                    </div>
                    <Tree
                        style={{width: "100%", textAlign: "left", paddingLeft: "0.5rem"}}
                        blockNode
                        showLine={showLine}
                        showIcon={showIcon}
                        selectable={false}
                        expandedKeys={expand}
                        onSelect={onSelect}
                        onExpand={(keys) => {
                            updateExpand(keys);
                        }}
                        defaultExpandAll
                        titleRender={(data: any) => {

                            return (
                                <div className="tree-node-item">
                                    <div className="chapter-name">
                                        {(!data.isLeaf
                                            ? `第${data.index + 1}章 `
                                            : `第${data.index + 1}节 `) + data.title}
                                    </div>

                                    {data.children.length == 0 ? (
                                        <a
                                            className="chapter-btn"
                                            onClick={() => this.onEnterClick(data)}
                                        >
                                            进入
                                            {data.lessonType == 1
                                                ? "文章"
                                                : data.lessonType == 2
                                                    ? "视频"
                                                    : data.lessonType == 3
                                                        ? "虚仿"
                                                        : data.lessonType == 4
                                                            ? "直播"
                                                            : ""}
                                            课程
                                        </a>
                                    ) : null}
                                </div>
                            );
                        }}
                        treeData={this.recursiveParseTree(null, chapters, expand)}
                    />
                </div>
            );
        };
        return (
            <div>
                <Demo></Demo>
            </div>
        );
    }

    //验证图片的比例
    private verificationImgProportion() {
        const image = $("#course-main-image");
        //    const height = $("#course-main-image").height();
        image.css("width", "5.94rem");
        image.css("height", "3.4rem");
        //    this.setState(({imgHeight:3.4}))

        let container = document.getElementById("text-container");
        if (container.scrollHeight > container.offsetHeight) {
            this.setState({moreVisible: true});
        } else {
            this.setState({moreVisible: false});
        }


    }

    private startStudy() {
        this.setState({currentSelect: 2});
    }

    public joinCourse() {
        if (CheckUserLogin()) {
            if (CheckUserAuthorized()) {
                this.setState({loadingJoinCourse: true})
                //登录并身份验证过
                var id = this.getId();
                AxioInstance.post(`${USER_ADD_COURSE}/${id}`).then((data: any) => {
                    message.success("添加成功");
                    this.setState({hasCourse: true, loadingJoinCourse: false});
                }).catch((e) => {
                    this.setState({loadingJoinCourse: false});
                    console.log(e);
                    if (e.code === 80031) {
                        this.setState({hasCourse: true});
                    } else {
                        message.error("添加失败");
                        console.log(e.code)
                    }
                })
            } else {
                this.props.globalStore.updateShowAuthModalVisible(true);
                return;
            }
        } else {
            return;
        }

    }

    toAuth = () => {
        this.props.history.push("/authenticate");
    };

    render() {
        const {courseData, record} = this.state;
        const schoolInfo = courseData?.collegeInfo?.schoolInfo;
        const data = [
            {
                title: "教学团队",
                onClick: () => {
                },
                icon: (
                    <img
                        src={
                            this.state.currentSelect == 0
                                ? "./ui/CoursePage/icon1_team_s.png"
                                : "./ui/CoursePage/icon1_team_n.png"
                        }
                        className="nav-icon"
                    />
                ),
                renderPanel: this.renderTeacherList.bind(this),
            },
            {
                title: "课程设计",
                onClick: () => {
                },
                icon: (
                    <img
                        src={
                            this.state.currentSelect == 1
                                ? "./ui/VRpage/icon1_project_s.png"
                                : "./ui/VRpage/icon1_project_n.png"
                        }
                        className="nav-icon"
                    />
                ),
                renderPanel: this.renderCourseDesigned.bind(this),
            },
            {
                title: "在线课程",
                onClick: () => {
                },
                icon: (
                    <img
                        src={
                            this.state.currentSelect == 2
                                ? "./ui/CoursePage/icon2_course_s.png"
                                : "./ui/CoursePage/icon2_course_n.png"
                        }
                        className="nav-icon"
                    />
                ),
                renderPanel: this.renderCourseDesign.bind(
                    this,
                    this.state.chapters,
                    this.state.expand
                ),
            },
            {
                title: "课程公告",
                onClick: () => {
                },
                icon: (
                    <img
                        src={
                            this.state.currentSelect == 3
                                ? "./ui/CoursePage/icon3_Notice_s.png"
                                : "./ui/CoursePage/icon3_Notice_n.png"
                        }
                        className="nav-icon"
                    />
                ),
                renderPanel: this.renderCourseNotice.bind(this),
            },
            {
                title: "互动问答",
                onClick: () => {
                },
                disable: false,
                icon: (
                    <img
                        src={
                            this.state.currentSelect == 4
                                ? "./ui/CoursePage/icon4_interaction_s.png"
                                : "./ui/CoursePage/icon4_interaction_n.png"
                        }
                        className="nav-icon"
                    />
                ),
                renderPanel: this.renderQAQ.bind(this),
            },
            {
                title: "考评测试",
                onClick: () => {
                },
                icon: (
                    <img
                        src={
                            this.state.currentSelect == 5
                                ? "./ui/CoursePage/icon5_Evaluation_s.png"
                                : "./ui/CoursePage/icon5_Evaluation_n.png"
                        }
                        className="nav-icon"
                    />
                ),
                renderPanel: this.renderCourseExamTest.bind(this),
            },
            {
                title: "考核标准",
                onClick: () => {
                },
                icon: (
                    <img
                        src={
                            this.state.currentSelect == 6
                                ? "./ui/CoursePage/icon6_assessment_s.png"
                                : "./ui/CoursePage/icon6_assessment_n.png"
                        }
                        className="nav-icon"
                    />
                ),
                renderPanel: this.renderTestStandard.bind(this),
            },
        ];
        const url = SERVER_PICTURE_URL + this.state.courseData?.courseImg;
        return (
            <div className="container">
                <div
                    className="video-header"
                >
                    <div style={{zIndex: 0}}>
                        <img
                            style={{
                                width: "100%",
                                //width: "100%",
                                height: "100%",
                                objectFit: "cover",
                            }}
                            src={"./ui/CoursePage/background_basemap.png"}
                            // src={SERVER_PICTURE_URL + this.state.courseData?.courseImg}
                        /></div>
                </div>
                <div
                    className="hide-text-1-column"
                    style={{
                        width: "100%",
                        height: "0.9rem",
                        position: "relative",
                        top: "-1.5rem",
                        fontSize: "0.42rem",
                        fontWeight: "bold",
                        color: "white",
                        padding: "0 2.52rem 0 2.52rem"
                    }}>
                    {this.state.courseData?.courseName}
                </div>
                <div className="course-content">
                    <div className="course-banner">
                        <div style={{display: "inline-flex", padding: "0.4rem 0.46rem 0.1rem 0.42rem"}}>
                            <div style={{
                                width: this.state.imgWidth + "rem",
                                //width: "100%",
                                height: this.state.imgHeight + "rem",
                            }}>
                                <img
                                    id="course-main-image"
                                    style={{
                                        width: "100%",
                                        height: "100%",
                                        objectFit: "cover",
                                        borderRadius: "0.02rem",
                                        marginBottom: "0.2rem",
                                    }}
                                    src={SERVER_PICTURE_URL + this.state.courseData?.courseImg}
                                    onLoad={this.verificationImgProportion.bind(this)}
                                    alt="课程宣传图"
                                /></div>
                            <div style={{marginLeft: "0.4rem", maxWidth: "6rem"}}>
                                <h3>课程介绍</h3>
                                <div id="text-container" className="description">
                                    {this.state.courseData?.description}
                                    <div style={{position: "absolute", bottom: 0, right: 0}}>
                                        {
                                            this.state.moreVisible ?
                                                <div
                                                    style={{minWidth: "6.8rem"}}>
                                                    <a className="more-desc" onClick={() => {
                                                        this.setState({visible: true});
                                                    }}>&emsp;&emsp;查看更多&nbsp;&gt;</a></div> : null
                                        }
                                    </div>
                                </div>


                                <div className="banner-info" style={{
                                    marginTop: "0.45rem",
                                    height: "1.4rem",
                                    display: "flex",
                                    flexDirection: "column",
                                    justifyContent: "space-between"
                                }}>
                                    <div style={{width: "100%", display: "flex"}}>
                                        <div style={{width: "50%"}}>
                                            <img
                                                className="li-icon"
                                                src="./ui/VRpage/icon_credit.png"
                                            />
                                            <span>学分<span style={{
                                                marginLeft: "0.2rem",
                                                color: "#333"
                                            }}>{this.state.courseData?.score / 100}</span></span>
                                        </div>
                                        <div style={{width: "50%"}}>
                                            <img
                                                className="li-icon"
                                                src="./ui/VRpage/icon_Class hours.png"
                                            />
                                            <span>学时<span style={{
                                                marginLeft: "0.2rem",
                                                color: "#333"
                                            }}>{this.state.courseData?.duration}</span></span>
                                        </div>
                                    </div>
                                    <div style={{width: "100%", display: "flex"}}>
                                        <div style={{width: "50%"}}>
                                            <img
                                                className="li-icon"
                                                src="./ui/VRpage/icon_subject.png"
                                            />
                                            <span>学科<span style={{
                                                marginLeft: "0.2rem",
                                                color: "#333"
                                            }}>{this.state.courseData?.typeInfo?.typeName}</span></span>
                                        </div>
                                        <div style={{width: "50%"}}>
                                            <img
                                                className="li-icon"
                                                src="./ui/VRpage/icon_teacher.png"
                                            />
                                            <span>教师<span style={{
                                                marginLeft: "0.2rem",
                                                color: "#333"
                                            }}>{(this.state.teachers && this.state.teachers.length > 0) ? this.state.teachers[0].name : "暂无"}</span></span>
                                        </div>
                                    </div>
                                    <div style={{width: "100%", display: "flex"}}>
                                        <div style={{width: "50%"}}>
                                            <img
                                                className="li-icon"
                                                src="./ui/VRpage/icon_school.png"
                                            />
                                            <span>学校<span
                                                style={{marginLeft: "0.2rem", color: "#333"}}>{schoolInfo?.name}</span></span>
                                        </div>
                                        <div style={{width: "50%"}}>
                                            <img
                                                className="li-icon"
                                                src="./ui/VRpage/icon_department.png"
                                            />
                                            <span>院系<span style={{
                                                marginLeft: "0.2rem",
                                                color: "#333"
                                            }}>{courseData?.collegeInfo?.collegeName}</span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/* <Affix className="affix" offsetTop={this.state.top}> */}
                        <div style={{
                            backgroundColor: "#fff",
                            padding: "0rem 0.46rem 0rem 0.42rem",
                            boxShadow: "0px 1px 1px #00000020"
                        }}>
                            <div style={{
                                backgroundColor: "white",
                                width: "100%",
                                display: "flex",
                                justifyContent: "space-between"
                            }}>
                                <ul className="stat-ul">
                                    <li>
                                        <span>累计访问量</span>
                                        <span style={{
                                            marginTop: "0.08rem",
                                            color: "#3E84FD",
                                            fontSize: "0.28rem"
                                        }}>{record?.visitCount}</span>
                                    </li>
                                    <li>
                                        <span>累计学生数</span>
                                        <span style={{
                                            marginTop: "0.08rem",
                                            color: "#3E84FD",
                                            fontSize: "0.28rem"
                                        }}>{record?.studentCount}</span>
                                    </li>
                                    <li>
                                        <span>累计测验数</span>
                                        <span style={{
                                            marginTop: "0.08rem",
                                            color: "#3E84FD",
                                            fontSize: "0.28rem"
                                        }}>{record?.examCount}</span>
                                    </li>

                                </ul>
                                <div>
                                    <div style={{
                                        display: "inline-flex",
                                        float: "right",
                                        marginRight: "0.0rem",
                                        marginTop: "0.25rem"
                                    }}
                                         className="course-btn">
                                        {this.state.hasCourse ? (
                                            <a
                                                onClick={this.startStudy.bind(this)}
                                                style={{
                                                    width: "1.5rem",
                                                    //lineHeight: "0.34rem",
                                                    fontSize: "0.24rem",
                                                    color: "white",
                                                    fontWeight: "bold",
                                                    //marginTop: "0.1rem",
                                                    display: "grid",
                                                    placeItems: "center",
                                                    height: "0.5rem",
                                                    borderRadius: "0.08rem",
                                                    background: "#3e84fd",
                                                }}
                                            >
                                                开始学习
                                            </a>
                                        ) : (
                                            <Spin
                                                tip="状态更新中"
                                                spinning={this.state.loadingJoinCourse}
                                            >
                                                <a
                                                    onClick={this.joinCourse.bind(this)}
                                                    style={{
                                                        width: "1.5rem",
                                                        //lineHeight: "0.34rem",
                                                        fontSize: "0.24rem",
                                                        color: "white",
                                                        //marginTop: "0.1rem",
                                                        fontWeight: "bold",
                                                        height: "0.5rem",
                                                        display: "grid",
                                                        placeItems: "center",
                                                        borderRadius: "0.08rem",
                                                        background: "#3e84fd",
                                                    }}
                                                >
                                                    加入课程
                                                </a>
                                            </Spin>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* </Affix> */}

                    </div>
                </div>
                <div className="course-content-bottom">
                    <div className="bottom-container">
                        {/* <Affix
                            offsetTop={this.state.top + 100}
                        > */}
                        <div className="left-panel">
                            {data.map((item, index) => {
                                return (
                                    <div
                                        key={index}
                                        className={`left-nav-btn nav-item ${!item.disable
                                            ? this.state.currentSelect === index
                                                ? "active"
                                                : ""
                                            : "disabled"
                                        }`}
                                        onClick={() => {
                                            this.setState({currentSelect: index});
                                            item.onClick.bind(this)();
                                        }}
                                    >
                                        {item.icon}
                                        <a>{item.title}</a>
                                    </div>
                                );
                            })}
                        </div>
                        {/* </Affix> */}
                        <div className="right-panel">
                            {data[this.state.currentSelect].renderPanel()}
                        </div>
                    </div>
                </div>

                <AuthenticateModal Confirm={this.toAuth.bind(this)}/>
                <Modal
                    title="课程介绍"
                    centered
                    visible={this.state.visible}
                    onOk={this.CloseModal.bind(this)}
                    onCancel={this.CloseModal.bind(this)}
                    footer={null}
                    width={1000}
                    bodyStyle={{height: 320, overflowY: "auto"}}
                >
                    <p>{this.state.courseData?.description}</p>
                </Modal>
            </div>
        );
    }
}


export default Course;
